<html>

<head>
    <meta name="" content="utf-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <script>

    </script>
    <style id="contentId">
        .c {
            margin-left: 350px;
        }
    </style>
    <title>王者荣耀</title>

</head>

<body>
    不浮动
    <div style="border: solid 5px #0e0; width:300px;">
        <div style="height: 100px; width: 100px; background-color: Red;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Green; ">
        </div>
        <div style="height: 100px; width: 100px; background-color: Yellow;">
        </div>
    </div>
    //红向右浮动
    <div style="border: solid 5px #0e0; width:300px;">
        <div style="height: 100px; width: 100px; background-color: Red; float:right;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Green; ">
        </div>
        <div style="height: 100px; width: 100px; background-color: Yellow;">
        </div>
    </div>
    //红框左移,覆盖绿框 
    <div style="border: solid 5px #0e0; width:300px;">
            <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
            </div>
            <div style="height: 100px; width: 100px; background-color: Green;">
            </div>
            <div style="height: 100px; width: 100px; background-color: Yellow;">
            </div>
        </div>
    //都向左浮动,父元素宽度为0 </p>
        <!-- <div style="border: solid 5px #0e0; width:300px;">
               <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
               </div>
               <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
               </div>
               <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
               </div>
           </div> -->
           //没有足够水平空间  </p>
           <!-- <div style="border: solid 5px #0e0; width:250px;">
                   <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
                   </div>
                   <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
                   </div>
                   <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
                   </div>
               </div> -->
               卡住了</p>
               <!-- <div style="border: solid 5px #0e0; width:250px;">
                       <div style="height: 120px; width: 100px; background-color: Red;  float:left;">
                       </div>
                       <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
                       </div>
                       <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
                       </div>
                   </div> -->
                   行框和清理:不浮动</p>  
                   <div style="border: solid 5px #0e0; width: 250px;">
                           <div style="height: 50px; width: 50px; background-color: Red;"></div>
                           <div style="height: 100px; width: 100px; background-color: Green;">
                              11111111111
                           </div>
                       </div>
                       行框和清理:浮动
                       <!-- <div style="border: solid 5px #0e0; width: 250px;">
                              <div style="height: 50px; width: 50px; background-color: Red; float:left;"></div>
                              <div style="height: 100px; width: 100px; background-color: Green;">
                                 11111111111
                              </div>
                          </div> -->
                          可以看出浮动后虽然绿色div布局不受浮动影响，正常布局，但是文字部分却被挤到了红色浮动div下边。要想阻止行框围绕在浮动元素外边，可以使用clear属性，属性的left，right，both，none表示框的哪些边不挨着浮动框。
                          <div style="border: solid 5px #0e0; width: 250px;">
                                <div style="height: 50px; width: 50px; background-color: Red; float:left;"></div>
                                <div style="height: 100px; width: 100px; background-color: Green; clear:both;">
                                   11111111111
                                </div>
                            </div>
                            </p>
                            //都向左浮动,父元素宽度为0
                            <!-- <div style="border: solid 5px #0e0; width:300px;">
                                   <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
                                   </div>
                                   <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
                                   </div>
                                   <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
                                   </div>
                               </div> -->

                               在最后添加一个空div，对它清理
                               <div style="border: solid 5px #0e0; width:300px;">
                                       <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
                                       </div>
                                       <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
                                       </div>
                                       <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
                                       </div>
                                       <div style="clear:both;"></div>
                                   </div>
                </body>

</html>